<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery对象和JS对象之间的转换</title>
    <script src="../../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" name="username" id="username" placeholder="请输入用户名">
<button onclick="getUserName()">点我一下</button>
</body>
<script>
    //点击按钮获取用户名输入框中的值
    function getUserName(){
         //1. 获取input输入框
        var $oIn = $("#username")
        //2.  调用val()方法获取value值
        //alert($oIn.val())

        // 这种方式无法获取，结果是undefined， 因为JQuery对象中没有value属性，value属性属于JS对象
        //alert($oIn.value)
        alert($oIn[0].value)
        alert($oIn.get(0).value)
    }



    function getUserName1(){
        //1. 获取input输入框
        var oInput = document.getElementById("username")
        //2. 获取value属性
       // alert(oInput.value)

        //此处是错误的，因为val()方法是JQuery的方法，只能JQuery对象调用，JS对象不能调用
        // alert(oInput.val())
        //js对象转换JQuery对象 只需要将对象作为参数传入  $()  比如 $(oInput)
        alert($(oInput).val())
    }
</script>
</html>